TypeScript 高级类型：掌握模板字面量类型和条件类型

国际示例：处理不同的日期格式

世界上不同的地区使用不同的日期格式。您可以使用条件类型来处理这些变体。

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (实现将处理不同的日期格式)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("无效的日期格式");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // 类型: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // 类型: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // 类型: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // 访问年份，已知它会存在

此示例使用条件类型根据指定的日期格式定义不同的日期解析函数。ParseDate 类型确保返回的对象具有基于格式的正确属性。

结合模板字面量类型和条件类型

当您结合模板字面量类型和条件类型时，真正的力量就展现出来了。这使得类型操作变得异常强大。

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // 为演示目的进行了简化
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


// 接受一个类型的示例函数
function processEvent(event: T): ExtractEventPayload {
    // 在实际实现中，我们将实际分派事件。
    console.log(`处理事件 ${event}`);

    // 在实际实现中，有效载荷将基于事件类型。
    return { type: event, payload: {} } as ExtractEventPayload;
}

// 请注意，返回类型非常具体：
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

// 如果使用其他字符串，则会得到 never：
// const someOtherEvent = processEvent("someOtherEvent"); // 类型为 `never`

最佳实践和注意事项

• 保持简洁: 虽然功能强大，但这些高级类型很快就会变得复杂。力求清晰和可维护性。
• 彻底测试: 通过编写全面的单元测试来确保您的类型定义按预期运行。
• 文档化您的代码: 清晰地记录您的高级类型的目的和行为，以提高代码可读性。
• 考虑性能: 过度使用高级类型可能会影响编译时间。分析您的代码并在必要时进行优化。